<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 爱宠之家</title>
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link href="../../styles.css" rel="stylesheet">
    <style>
        .auth-container {
            min-height: calc(100vh - 76px - 300px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 0;
        }

        .auth-card {
            width: 100%;
            max-width: 400px;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        .social-login {
            margin-top: 1.5rem;
            text-align: center;
        }

        .social-login .btn {
            margin: 0.5rem;
            padding: 0.5rem 1.5rem;
        }

        .navbar-brand {
            font-weight: bold;
            color: #337ab7;
        }

        .back-to-home {
            margin-bottom: 1rem;
        }

        .register-link {
            text-align: center;
            margin-top: 1rem;
        }
    </style>
</head>

<body>
    <!-- 简化导航栏 -->
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="../../index.html">爱宠之家</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="../../index.html">首页</a></li>
                    <li><a href="../../view/adoption/adoption.html">宠物领养</a></li>
                    <li><a href="../../view/cats/cats.html">猫咪选购</a></li>
                    <li><a href="../../view/large-dogs/large-dogs.html">小型犬选购</a></li>
                    <li><a href="../../view/large-dogs/large-dogs.html">大型犬选购</a></li>
                    <li><a href="../../view/food/food.html">宠物用品</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 登录区域 -->
    <div class="auth-container">
        <div class="auth-card bg-white">
            <div class="back-to-home">
                <a href="../../index.html"><i class="bi bi-arrow-left"></i> 返回首页</a>
            </div>

            <h3 class="text-center mb-4">账号登录</h3>

            <!-- 登录表单 -->
            <form id="loginForm">
                <div class="mb-3">
                    <label class="form-label">手机号/邮箱</label>
                    <input type="text" class="form-control" id="loginUsername" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">密码</label>
                    <input type="password" class="form-control" id="loginPassword" required>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="rememberMe">
                    <label class="form-check-label" for="rememberMe">记住我</label>
                    <a href="#" class="float-end">忘记密码？</a>
                </div>
                <button type="submit" class="btn btn-primary w-100">登录</button>
            </form>

            <!-- 社交登录 -->
            <div class="social-login">
                <p class="text-muted">其他登录方式</p>
                <button class="btn btn-outline-danger"><i class="bi bi-phone"></i> 手机验证码登录</button>
            </div>

            <!-- 注册链接 -->
            <div class="register-link">
                <p>还没有账号？<a href="register.html">立即注册</a></p>
            </div>
        </div>
    </div>

    <!-- 简化页脚 -->
    <footer class="mt-5 py-4 bg-light">
        <div class="container">
            <div class="text-center">
                <p class="mb-0">Copyright © 2024 爱宠之家 All Rights Reserved</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>
    <script>
        // 表单提交处理
        document.getElementById('loginForm').addEventListener('submit', function (e) {
            e.preventDefault();
            // 这里添加登录逻辑
            console.log('登录表单提交');
        });
    </script>
</body>

</html>